<template>
  <el-drawer
    ref="drawer"
    :title="form.id ? '编辑活动' : '新增活动'"
    :before-close="handleClose"
    :visible.sync="drawer"
    direction="rtl"
    custom-class="demo-drawer"
    size="60%"
  >
    <hr>
    <div class="demo-drawer__content" style="padding: 0 20px">
      <el-form ref="form" :model="form" label-position="top" :rules="rules">
        <el-row type="flex">
          <el-form-item label="所属小区" prop="community_code">
            <el-select
              v-model="form.community_code"
              placeholder="请输入"
              style="width: 350px"
            >
              <el-option
                v-for="item in selectHome"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="活动主题"
            style="width: 350px; margin-left: 30px"
            prop="title"
          >
            <el-input v-model="form.title" autocomplete="off" />
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="活动地点" style="width: 350px" prop="place">
            <el-input v-model="form.place" autocomplete="off" />
          </el-form-item>
          <el-form-item
            label="举办单位"
            style="width: 350px; margin-left: 30px"
            prop="sponsor_unit"
          >
            <el-input v-model="form.sponsor_unit" autocomplete="off" />
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="活动开始时间" prop="begin_time" style="width: 350px">
            <el-date-picker
              v-model="form.begin_time"
              :picker-options="pickerOptionsStart"
              type="datetime"
              placeholder="选择日期"
              style="width: 350px"
            />
          </el-form-item>
          <el-form-item
            prop="end_time"
            label="活动结束时间"
            style="width: 350px; margin-left: 30px"
          >
            <el-date-picker
              v-model="form.end_time"
              :picker-options="pickerOptionsEnd"
              type="datetime"
              placeholder="选择日期"
              style="width: 350px"
            />
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="活动状态" style="width: 350px">
            <el-col>
              <el-radio v-model="form.status" :label="1">有效</el-radio>
              <el-radio v-model="form.status" :label="0">无效</el-radio>
            </el-col>
          </el-form-item>
          <el-form-item label="图片" style="width: 350px; margin-left: 30px">
            <uploadImg ref="uploadImage" :seeimage2="seeimage1" @removeUrl="removeUrl" @pushImage="pushImage" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="活动内容">
            <quillEditor v-model="form.content" class="quillEditor" :options="editorOption" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <hr>
    <div class="demo-drawer__footer">
      <el-button @click="closeDia">取 消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
// 引入样式和quillEditor
// import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { timeToTimestamp } from '@/filters/index'
import { addData, editData } from '@/api/service'
export default {
  name: 'AddImage',
  // inject: ['imageList'],
  components: {
    quillEditor
  },
  props: {
    drawer: Boolean,
    selectHome: {
      type: Array,
      default: () => []
    },
    seeimage1: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            [{ size: ['small', false, 'large', 'huge'] }],
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
            [{ align: [] }], // 对齐方式-----[{ align: [] }]
            [{ font: [] }],
            [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
            [{ direction: 'rtl' }] // 文本方向-----[{'direction': 'rtl'}]
          ]
        }
      },
      radio: null, // 单选
      imgList: [],
      form: {
        begin_time: null,
        community_code: '',
        content: '',
        end_time: null,
        photo: '',
        place: '',
        sponsor_unit: '',
        status: 1,
        title: ''
      },
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.end_time) {
            return time.getTime() > new Date(this.form.end_time).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.form.begin_time) {
            return time.getTime() < new Date(this.form.begin_time).getTime() - 86400000
          }
        }
      },
      formLabelWidth: '120px',
      rules: {
        community_code: [
          { required: true, message: '请选择小区', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请填写活动主题', trigger: 'blur' }
        ],
        place: [
          { required: true, message: '请填写活动地点', trigger: 'blur' }
        ],
        sponsor_unit: [
          { required: true, message: '请填写举办单位', trigger: 'blur' }
        ],
        begin_time: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {},
  created() {
    // console.log(123)
  },
  methods: {
    handleClose() {
      // this.drawer = false
      this.form = {
        begin_time: null,
        community_code: '',
        content: '',
        end_time: null,
        photo: '',
        place: '',
        sponsor_unit: '',
        status: 1,
        title: ''
      }
      this.$emit('closeDrawer')
      this.imgList = []
      this.$refs.uploadImage.fileList = []
      // this.$emit('clearSeeImage')
      // this.$refs.uploadUmage.fileList = []
      // this.seeimage = []
    },
    // 移除图片地址
    removeUrl(url) {
      console.log(url)
      this.imgList = this.imgList.filter(item => url !== item)
      console.log(this.imgList)
    },
    pushImage(url) {
      this.imgList.push(url)
      console.log(this.imgList)
    },
    closeDia() {
      this.handleClose()
    },
    async submit() {
      await this.$refs.form.validate()
      console.log(111)
      this.form.begin_time = timeToTimestamp(this.form.begin_time)
      this.form.end_time = timeToTimestamp(this.form.end_time)
      // this.form.id ? '' : this.form.photo = this.imgList.join(',')
      this.form.photo = this.imgList.join(',')
      this.form.id ? await editData(this.form) : await addData(this.form)
      this.$message.success(this.form.id ? '添加成功' : '修改成功')
      this.closeDia()
      this.$emit('getData')
    }
  }
}
</script>

<style lang="scss" scoped>
.quillEditor{
  line-height: normal;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}
::v-deep .el-icon-close {
  position: absolute;
  left: -35px;
  top: 18px;
}
::v-deep .el-radio {
  margin-right: 15px;
}
::v-deep .el-form {
  height: 550px;
  overflow: scroll;
  overflow-x:hidden
}
::v-deep .ql-container{
  height: 100px;
}
.demo-drawer__footer{
  float: right;
  margin-right: 30px;
}
</style>
